<template>
  <div style="width: 100% ;height: 100%">
    <div style="width: 100% ;height: 100%" class="about">

      <div style="width: 100% ;height: 100%" class="bor-about">
        <div class="bar" style="    display: flex
;
    justify-content: space-between;">
          <div style="line-height: 72px;font-size: 38px">雪瓜大计划！</div>
          <router-link to="/Allrouter/Home" tag="div" style="margin: 0;height: 24px;background-color: rgba(138, 219, 52, 0.8196078431);color: #fff;font-weight: bolder" class="btn"> 开始答题！！！</router-link>
        </div>
        <div class="content">
          <div style="display: flex">
            <div style="display: flex;flex-direction: column; background-color: #333333;border-radius: 16px;   padding-right: 24px;flex: 1.5" class="borCon">
              <div  style="margin-left: 12px;color:#ffffff;font-size: 18px;font-weight: bolder; padding: 12px"
                   class="borContent Title-text">
                出行计划任务表

              </div>
              <div style="display: flex;flex-direction: row;flex: 1" class="borContent">
                <div style="    width: 320px;
    text-align: center;padding: 20px;">
                  <div style="margin-top: 28px">
                    <el-progress stroke-width="12" type="dashboard" :percentage="80" :color="colors"/>
                  </div>
                  <div>
                    <div style="    margin-top: 24px;
    font-size: 24px;
    color: #fff;">计划完善程度
                    </div>
                    <div></div>
                  </div>
                </div>
                <div style="flex: 1;display: flex">
                  <div class="progress-b" style="flex: 1">
                    <el-progress
                        :text-inside="true"
                        :stroke-width="24"
                        :percentage="50"
                        status="success"
                    >
                      <span>锻炼身体</span>
                    </el-progress>
                    <el-progress
                        :text-inside="true"
                        :stroke-width="24"
                        :percentage="30"
                        status="exception"
                    >
                      <span>减肥</span>
                    </el-progress>
                    <el-progress
                        :text-inside="true"
                        :stroke-width="24"
                        :percentage="80"
                        status="exception"
                    >
                      <span>完美计划</span>
                    </el-progress>
                    <el-progress
                        :text-inside="true"
                        :stroke-width="24"
                        :percentage="30"
                        status="warning"
                    >
                      <span>置备行李</span>
                    </el-progress>
                  </div>
                </div>

              </div>


            </div>
            <div style="margin-left: 12px;width: 400px" class="borCon">
              <el-calendar :range="[new Date(2024, 12, 29), new Date(2024, 12, 24)]"/>
            </div>
          </div>
        </div>
        <div class="flexAll bottom" style="display: flex;flex-direction: column; border-radius: 16px;background-color: #333333" >
          <div class="Title-bottom Title-text" style="height: 24px;">
            计划列表
          </div>
          <div class="flexAll flex1" >
            <div class="plant-form flexAll flex1" >
              <div class="title" style="">
                <div class="title-left">
                  <div><el-button type="primary"  circle >雪</el-button></div>
                  <div><el-button type="primary"  circle >瓜</el-button></div>
                </div>
                <div class="title-right">
                  <div> <el-button type="warning" :icon="Star" circle /></div>
                </div>
              </div>
              <div class="content flexAll flex1">
                <div class="content">配置眼镜</div>
                <div class="bottom">破脑子！快想啊！眼镜到底多少度</div>
                <div class="Time">
                  <el-countdown format="DD [days] HH:mm:ss" :value="value2">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        <el-icon style="margin-right: 4px" :size="12">
                          <Calendar />
                        </el-icon>
                        剩余时间：
                      </div>
                    </template>
                  </el-countdown>
                </div>
              </div>

            </div>
            <div class="plant-form flexAll flex1" >
              <div class="title" style="">
                <div class="title-left">
<!--                  <div><el-button type="primary"  circle >雪</el-button></div>-->
                  <div><el-button type="primary"  circle >瓜</el-button></div>
                </div>
                <div class="title-right">
                  <div> <el-button type="warning" :icon="Star" circle /></div>
                </div>
              </div>
              <div class="content flexAll flex1">
                <div class="content">神秘惊喜</div>
                <div class="bottom">到底 要准备什么惊喜呢 愁捏</div>
                <div class="Time">
                  <el-countdown format="DD [days] HH:mm:ss" :value="value3">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        <el-icon style="margin-right: 4px" :size="12">
                          <Calendar />
                        </el-icon>
                        剩余时间：
                      </div>
                    </template>
                  </el-countdown>
                </div>
              </div>

            </div>
            <div class="plant-form flexAll flex1" >
              <div class="title" style="">
                <div class="title-left">
                  <div><el-button type="primary"  circle >雪</el-button></div>
                  <div><el-button type="primary"  circle >瓜</el-button></div>
                </div>
                <div class="title-right">
                  <div> <el-button type="warning" :icon="Star" circle /></div>
                </div>
              </div>
              <div class="content flexAll flex1">
                <div class="content">周六半天干什么！</div>
                <div class="bottom">会有人不同意睡懒觉吗？</div>
                <div class="Time">
                  <el-countdown format="DD [days] HH:mm:ss" :value="value4">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        <el-icon style="margin-right: 4px" :size="12">
                          <Calendar />
                        </el-icon>
                        剩余时间：
                      </div>
                    </template>
                  </el-countdown>
                </div>
              </div>

            </div>
            <div class="plant-form flexAll flex1" >
              <div class="title" style="">
                <div class="title-left">
                  <div><el-button type="primary"  circle >雪</el-button></div>
                  <div><el-button type="primary"  circle >瓜</el-button></div>
                </div>
                <div class="title-right">
                  <div> <el-button type="warning" :icon="Star" circle /></div>
                </div>
              </div>
              <div class="content flexAll flex1">
                <div class="content">收拾行李</div>
                <div class="bottom">不会有人还没收拾行李吧！</div>
                <div class="Time">
                  <el-countdown format="DD [days] HH:mm:ss" :value="value5">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        <el-icon style="margin-right: 4px" :size="12">
                          <Calendar />
                        </el-icon>
                        剩余时间：
                      </div>
                    </template>
                  </el-countdown>
                </div>
              </div>

            </div>
            <div class="plant-form flexAll flex1" >
              <div class="title" style="">
                <div class="title-left">
                  <div><el-button type="primary"  circle >雪</el-button></div>
<!--                  <div><el-button type="primary"  circle >瓜</el-button></div>-->
                </div>
                <div class="title-right">
                  <div> <el-button type="warning" :icon="Star" circle /></div>
                </div>
              </div>
              <div class="content flexAll flex1">
                <div class="content">下载电视剧</div>
                <div class="bottom">我老婆说他要自己下载电视剧！</div>
                <div class="Time">
                  <el-countdown format="DD [days] HH:mm:ss" :value="value6">
                    <template #title>
                      <div style="display: inline-flex; align-items: center">
                        <el-icon style="margin-right: 4px" :size="12">
                          <Calendar />
                        </el-icon>
                        剩余时间：
                      </div>
                    </template>
                  </el-countdown>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { Calendar } from '@element-plus/icons-vue'

const value = ref(Date.now() + 1000 * 60 * 60 * 7)
const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2)
const value2 = ref( dayjs('2024-12-28 12:00'))
const value3 = ref( dayjs('2024-12-27 24:00'))
const value4 = ref( dayjs('2024-12-28 09:00'))
const value5 = ref( dayjs('2024-12-28 10:00'))
const value6 = ref( dayjs('2024-12-28 08:00'))
</script>

<style lang="scss">
.about {
  padding-left: 24px;

  .borCon {
    //flex:1;
  }

  .bor-about {
    display: flex;
    flex-direction: column;

    & > div {
      margin: 8px;
      border-radius: 16px;
      //background-color: #333333;
    }

    .bar {
      height: 62px;
      background-color: inherit;
      color: #ffffff;

    }

    .content {
      flex: 1;
    }

    .bottom {
      flex: 1;
      margin-bottom: 0px;
    }
  }

  .el-calendar__body {
    padding: 0px 17px 9px;
  }

  .el-calendar {
    width: 400px;
    border-radius: 16px;
    --el-calendar-cell-width: 52px;

    .el-calendar-table .el-calendar-day {
      padding: 2px;
    }

    .current {
      .el-calendar-day {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      span {
        aspect-ratio: 1 / 1;
        background: #fafa;
        height: 66%;
        border-radius: 39px;
        justify-content: center;
        align-items: center;
        display: flex;
      }
    }
  }
}
.el-progress-circle{
  height: 180px !important;
  width: 180px !important;
}
.el-progress__text{
  font-size: 26px !important;
  color: #fff !important;
}
.progress-b{
  padding-bottom: 24px;
  flex: 1;
  display: flex
;
  flex-direction: column;
  justify-content: space-around;
}
/* 你的样式 */
.flexAll{
  display: flex;
  flex: 1;
  &>.flex1{
    flex: 1;
  }
}
.plant-form{
  padding: 16px;
  border-radius: 16px;
  background-color: #111111;
  color: #fff;
  margin: 12px;
  flex-direction: column;
  .title{
    font-size: 16px;
    display: flex
  ;
    flex-direction: row;
    justify-content: space-between;
    .title-left{
      display: flex;
      flex-direction: row;
      div{
        margin-left: -8px;
      }
    }
  }
  .content{
    font-size: 14px;
    flex-direction: column;
    padding: 18px 0px 12px 0;
  }
  .bottom{
    font-size: 12px;
  }
  .Time{
    font-weight: 700;
    font-size:28px;
    .el-statistic{
    --el-statistic-content-color:#FFF !important;
  }
  }
}
.Title-text{
  margin-left: 12px;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: bolder;
  padding: 12px;
}
.el-progress__text{
  color: #fff;
}
</style>